<template>
    <div class="lwy-ioperate">
        <div class="lwy-back">
            <router-link to="/happyhome/live/account"><i class="el-icon-arrow-left"></i>返回</router-link>
            <router-link to="/HappyHome/live/family"><span class="expenditure">开支</span></router-link>
            /<span class="income">收入</span>
        </div>
        <div class="lwy-specific-information">
            <div class="personal-information" v-for="member in memberArr" @click="informationTable(member.id, member.name)">
                <div class="style-div"></div>
                <div class="information">
                    <p><span>姓名:</span>{{ member.name }}</p>
                    <p><span>收入金额:</span>{{ member.income }}</p>
                </div>
            </div>
        </div>
        <div class="lwy-income">
            <el-dialog :title="memberName" :visible.sync="Income">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-date-picker v-model="value" type="year" placeholder="选择年" value-format=yyyy>
                    </el-date-picker>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="text" @click="addIncome = true" class="el-button1">添加</el-button>
                    </el-form-item>
                </el-form>
                <div class="table">
                    <el-table :data="member" border style="width: 100%">
                        <el-table-column prop="time" label="日期">
                        </el-table-column>
                        <el-table-column prop="category" label="类别">
                        </el-table-column>
                        <el-table-column prop="money" label="收入（元）">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" class="button-edit"
                                    @click="editIncome(scope.row)">修改</el-button>
                                <el-popconfirm title="确定删除该条账单吗？" @confirm="delIncome(scope.row)">
                                    <el-button type="text" size="small" slot="reference" class="button-del">删除</el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="Income = false">取 消</el-button>
                    <el-button type="primary" @click="Income = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 添加弹框 -->
        <div class="add">
            <el-dialog title="添加" :visible.sync="addIncome">
                <el-form :model="incomeform">
                    <el-form-item label="时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="incomeform.time" type="datetime" placeholder="选择日期时间"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="formLabelWidth">
                        <el-input v-model="incomeform.category" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收入（元）" :label-width="formLabelWidth">
                        <el-input v-model="incomeform.money" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addIncome = false">取 消</el-button>
                    <el-button type="primary" @click="adddetermine">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 修改弹框 -->
        <div class="edit">
            <el-dialog title="修改" :visible.sync="editIncome1">
                <el-form :model="editincomeform">
                    <el-form-item label="时间" :label-width="formLabelWidth">
                        <el-date-picker v-model="editincomeform.time" type="datetime" placeholder="选择日期时间"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="类别" :label-width="formLabelWidth">
                        <el-input v-model="editincomeform.category" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收入（元）" :label-width="formLabelWidth">
                        <el-input v-model="editincomeform.money" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editIncome1 = false">取 消</el-button>
                    <el-button type="primary" @click="editdetermine">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            Income: false,
            addIncome: false,
            editIncome1: false,
            value: '',
            memberId: 0,
            memberName: '',
            memberArr: [],
            member: [],
            formLabelWidth: '100px',
            formInline: {
                user: ''
            },
            incomeform: {
                name: '',
                time: '',
                category: '',
                money: ''
            },
            editincomeform: {
                id: '',
                time: '',
                category: '',
                money: ''
            },
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            }
        }
    },
    methods: {
        // 成员渲染
        information() {
            axios({
                url: '/dbdata/memberArrs?_embed=income1'
            }).then(({ data }) => {
                this.memberArr = data
            })
        },
        // 成员具体信息
        informationTable(v, v1) {
            this.Income = true
            this.memberId = v;
            this.memberName = v1
            for (let i = 0; i < this.memberArr.length; i++) {
                if (v == this.memberArr[i].id) {
                    this.member = this.memberArr[i].income1
                }
            }

        },
        // 查询
        onSubmit() {
            axios({
                url: '/dbdata/income1/'
            }).then(({ data }) => {
                this.member=[];
                for (let i = 0; i < data.length; i++) {
                    if (this.value == data[i].time.slice(0,4) &&this.memberId==data[i].memberArrId) {
                        this.member.push(data[i])
                    }
                }

            })
        },
        // 添加
        adddetermine() {
            this.incomeform.name = this.memberName
            this.incomeform.money = parseFloat(this.incomeform.money);
            axios({
                url: `/dbdata/memberArrs/${this.memberId}/income1`,
                method: 'post',
                data: this.incomeform
            }).then(({ data }) => {
                this.member.push(data)
                this.$message.success('添加成功')
                this.addIncome = false
                this.incomeform = {
                    name: '',
                    time: '',
                    category: '',
                    money: ''
                }
            })
        },
        // 修改
        editIncome(row) {
            this.editIncome1 = true
            this.editincomeform = {
                id: row.id,
                time: row.time,
                category: row.category,
                money: row.money
            }
        },
        editdetermine() {
            axios({
                url: '/dbdata/income1/' + this.editincomeform.id,
                method: 'patch',
                data: this.editincomeform
            }).then(({ data }) => {
                this.member.push(data)
                this.editIncome1 = false
                this.information()
                this.$message.success('修改成功')
            })
        },
        // 删除
        delIncome(row) {
            axios({
                url: '/dbdata/income1/' + row.id,
                method: 'delete'
            }).then(({ data }) => {
                this.$message.success('删除成功');
                this.member.forEach((v, i) => {
                    if (v.id == row.id) {
                        this.member.splice(i, 1)
                    }
                })

            })
        }
    },
    mounted() {
        this.information(),
            axios({
                url: '/dbdata/income1'
            }).then(({ data }) => {
                let sum1 = 0;
                let sum2 = 0;
                let sum3 = 0;
                let sum4 = 0;
                for (let j = 0; j < data.length; j++) {
                    if (data[j].memberArrId == 1) {
                        sum1 += parseFloat(data[j].money)
                    } else if (data[j].memberArrId == 2) {
                        sum2 += parseFloat(data[j].money)
                    } else if (data[j].memberArrId == 3) {
                        sum3 += parseFloat(data[j].money)
                    } else if (data[j].memberArrId == 4) {
                        sum4 += parseFloat(data[j].money)
                    }
                }
                this.memberArr[0].income = sum1
                this.memberArr[1].income = sum2
                this.memberArr[2].income = sum3
                this.memberArr[3].income = sum4

            })
    }
}
</script>
<style lang="less">
.lwy-ioperate {
    .lwy-back {
        text-align: left;
        margin-left: 5px;
        margin-top: 20px;

        a:-webkit-any-link {
            color: rgba(00, 00, 00, 0.67);
            text-decoration: none;

            .el-icon-arrow-left {
                margin-right: 5px;
                margin-left: 20px;
            }

        }

        .expenditure {
            color: #000;
            margin-left: 20px;
            margin-right: 5px;
            font-size: 15px;
            font-weight: bold;
        }

        .income {
            color: #409EFF;
            margin-left: 10px;
            font-size: 15px;
            font-weight: 550;
        }
    }

    .lwy-specific-information {
        .personal-information {
            width: 300px;
            height: 150px;
            border-radius: 1.5em;
            background-color: rgba(252, 244, 223, 0.5);
            position: relative;
            margin-top: 50px;
            margin-left: 90px;
            float: left;

            .style-div {
                width: 25px;
                height: 25px;
                background-color: #fff;
                border-radius: 50%;
                position: absolute;
                left: 15px;
                top: 10px;
            }

            .information {
                position: absolute;
                top: 20px;
                left: 28%;

                p {
                    margin-bottom: 30px;
                    text-align: left;

                    span {
                        margin-right: 10px;
                    }
                }
            }

            &:hover {
                box-shadow: 0px 0px 6px #9a9595;
                color: rgba(00, 00, 00, 0.7);
                background-color: rgba(252, 244, 223, 1);
            }
        }
    }

    .lwy-income {
        .el-dialog {
            .el-form {
                text-align: left;
                margin-left: 20px;
                height: 42px;
                margin-top: -20px;

                .el-date-editor {
                    width: 150px;
                    margin-right: 15px;
                }
            }



            .el-button--primary {
                width: 80px;
                background-color: rgb(255, 233, 192);
                color: rgba(00, 00, 00, 0.8);
                border-color: rgb(255, 233, 192);

                &:hover {
                    background-color: rgba(255, 233, 192, 0.8);
                    color: rgba(00, 00, 00, 0.5);
                    border-color: rgba(255, 233, 192, 0.8);
                }
            }

            .el-button1 {
                width: 80px;
                background-color: rgb(255, 233, 192);
                color: rgba(00, 00, 00, 0.8);
                border-color: rgb(255, 233, 192);
                margin-left: 20px;

                a:-webkit-any-link {
                    color: rgba(00, 00, 00, 0.8);
                    text-decoration: none;

                    .el-icon-arrow-left {
                        margin-right: 5px;
                    }
                }

                &:hover {
                    background-color: rgba(255, 233, 192, 0.8);
                    color: rgba(00, 00, 00, 0.5);
                    border-color: rgba(255, 233, 192, 0.8);
                }
            }

            .table {
                height: 350px;
                overflow-y: scroll;

                .el-table {
                    width: 95% !important;
                    margin-left: 20px;
                    margin-top: 20px;
                    border-radius: 0.5em;

                    .el-table__cell {
                        text-align: center;
                    }

                    .button-edit {
                        background-color: rgba(255, 255, 255, 0.0) !important;
                        width: 50px !important;
                    }

                    .button-del {
                        background-color: rgba(255, 255, 255, 0.0) !important;
                        width: 50px !important;
                    }
                }
            }
        }
    }

    .add {
        .el-dialog {
            width: 500px;

            .el-form {
                width: 385px;
                text-align: left;
                margin-left: 40px;

                .el-input {
                    width: 300px;
                    float: right;
                }

                .el-form-item__label {
                    text-align: left;
                }
            }
        }

    }

    .edit {
        .el-dialog {
            width: 500px;

            .el-form {
                width: 385px;
                text-align: left;
                margin-left: 40px;

                .el-input {
                    width: 300px;
                    float: right;
                }

                .el-form-item__label {
                    text-align: left;
                }
            }
        }
    }
}
</style>